<template>
  <div class="menu">
    <div
      style="
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
      "
    >
      <img
        style="width: 71px"
        mode="widthFix"
        src="https://pics.leshiguang.com/vpage/2024/01/19/f58352dd3420417a96ca994b00b5e9e1.png"
        alt=""
      />
    </div>

    <ul>
      <li
        v-for="(item, index) in items"
        :key="item"
        :style="{ transform: item.transform }"
        @click="onClick(item, index)"
      >
        <img
          style="
            width: 136px;
            height: 100px;
            position: absolute;
            left: 0;
            top: 0;
          "
          :style="{ transform: `rotate(${index * 60 - 30}deg)` }"
          :src=" item.status === 1 ? item.bgIcon : item.bgHighIcon"
          alt=""
        />
        <div
          style="
            display: flex;
            position: relative;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 136px;
            height: 100px;
            z-index: 1;
          "
        >
          <img
            style="width: 20px; height: 20px; margin-bottom: 2px"
            :src="item.status === 1 ? item.icon : item.highIcon"
            alt=""
          />
          <div
            style="
              font-size: 14px;
              line-height: normal;
              margin-bottom: 2px;
              font-weight: bold;
            "
            :style="item.status === 1 ? 'color: #222' : 'color: white'"
          >
            {{ `${String(index + 1).padStart(2, '0')}.${item.name}` }}
          </div>
          <div v-if="item.status === 1" style="color: rgba(34, 34, 34, 0.5); font-size: 11px; display: inline-flex; align-items: center;">
            去完成
            <image style="width: 16px; height: 16px;" src="https://pics.leshiguang.com/vpage/2024/01/02/6fd21b894b2d489b9b7fafd55a5a59ef.png" />
          </div>
          <div v-else style="color: rgba(255, 255, 2555, 0.8); font-size: 11px; line-height: normal">
            {{ item.desc || getTime(item) }}
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>

import dayjs from '@/common/utils/day/day.js'

const getAxis = (angle, r) => {
  // 公式，r-半径，angle-角度
  // x: r+r*Math.sin(angle*Math.PI/180)
  // y: r-r*Math.cos(angle*Math.PI/180)
  return `translate(${r * Math.sin((angle * Math.PI) / 180) + r}px, ${
    r - r * Math.cos((angle * Math.PI) / 180)
  }px)`;
};

export default {
  components: {},
  props: {
    healthStatus: {
      Type: Array,
      default: () => [],
    }
  },
  data() {
    return {
      items: [
      {
          name: "健康检测",
          icon: "https://pics.leshiguang.com/vpage/2024/01/19/52d34151aca04e75a489b42466f294ef.png",
          highIcon: 'https://pics.leshiguang.com/vpage/2024/01/21/ab9cb42103c94d25810f7cc9bdd2ccf8.png',
          status: 1, // 1表示已完成
          transform: undefined,
          bgIcon: 'https://pics.leshiguang.com/vpage/2024/01/22/7c49b00d547b4aefa6df480e5b64038e.png',
          bgHighIcon: 'https://pics.leshiguang.com/vpage/2024/01/22/9dccf6dd78834bb691754f73da10267d.png',
        },
        {
          name: "健康档案",
          icon: "https://pics.leshiguang.com/vpage/2024/01/19/c1152fa7f28b48d7abcb99169b9073c9.png",
          status: 1, // 1表示已完成
          highIcon: 'https://pics.leshiguang.com/vpage/2024/01/21/6ad05666bcdc4517a995700e42543b59.png',
          bgIcon: 'https://pics.leshiguang.com/vpage/2024/01/22/7c49b00d547b4aefa6df480e5b64038e.png',
          bgHighIcon: 'https://pics.leshiguang.com/vpage/2024/01/22/1ed2433d940c431bb54d391b7aee9d95.png',
        },
        {
          name: "健康评估",
          icon: "https://pics.leshiguang.com/vpage/2024/01/19/9a86f15bcf0e4008a6ee320b956dc684.png",
          status: 1, // 1表示已完成
          highIcon: 'https://pics.leshiguang.com/vpage/2024/01/21/9fdd72e23158405987f71c976f9de04c.png',
          bgIcon: 'https://pics.leshiguang.com/vpage/2024/01/22/21a1943290cd4ff89b28688082084b9b.png',
          bgHighIcon: 'https://pics.leshiguang.com/vpage/2024/01/22/43ce2712da814fe0ac3b59bb8fa46025.png',
        },
        {
          name: "健康干预",
          icon: "https://pics.leshiguang.com/vpage/2024/01/19/3e9d1dedc5f0452d8a497b21b1cfb4eb.png",
          status: 1, // 1表示已完成
          highIcon: 'https://pics.leshiguang.com/vpage/2024/01/21/f56a76c476404e5e8e474f953a873f2f.png',
          bgIcon: 'https://pics.leshiguang.com/vpage/2024/01/22/e9eb358b5d424e0b9b3c6bd7df455304.png',
          bgHighIcon: 'https://pics.leshiguang.com/vpage/2024/01/22/29567ffbfcfb4f998896d6882fa14c7f.png',
          desc: '执行中',
        },
        {
          name: "健康指导",
          icon: "https://pics.leshiguang.com/vpage/2024/01/19/49bdddfaa8684352a4f8dfdcc21bd058.png",
          status: 1, // 1表示已完成
          highIcon: 'https://pics.leshiguang.com/vpage/2024/01/21/02d6816227ca479099f9148f706c527f.png',
          bgIcon: 'https://pics.leshiguang.com/vpage/2024/01/22/9a97c652550441aa8ca48ab9c113d0d0.png',
          bgHighIcon: 'https://pics.leshiguang.com/vpage/2024/01/22/3a17d77150524e4a83c868467bf51841.png',
          desc: '服务中',
        },
        {
          name: "效果评价",
          icon: "https://pics.leshiguang.com/vpage/2024/01/19/4a50a15300b740bb94a2906948b3fe25.png",
          status: 1, // 1表示已完成
          highIcon: 'https://pics.leshiguang.com/vpage/2024/01/21/e289d96f027340818b281e2fb04cf366.png',
          bgIcon: 'https://pics.leshiguang.com/vpage/2024/01/22/bcd676d99ef84655904fcb40c561b0d9.png',
          bgHighIcon: 'https://pics.leshiguang.com/vpage/2024/01/22/a073c2e35c294d3cad22eb1179ced46b.png',
          desc: '良好',
        },
        
      ],
      showNote: false,
    };
  },
  watch: {
    healthStatus(val) {
      if (val) {
        this.items.forEach((item, i) => {
          const obj = val[i];
          Object.assign(item, obj);
        })
      }
    }
  },
  created() {
    this.loadData();
  },
  methods: {
    loadData() {
      let num = 6;
      let angle = 360 / num;
      let arr = [];
      for (let index = 0; index < num; index++) {
        arr.push(index * angle - 30);
      }
      arr = arr.map((d) => getAxis(d, 95));
      this.items.forEach((e, i) => {
        e.transform = arr[i];
      });
    },
    onBannerClick() {},
    isSelf() {
      return true;
    },
    onMemberClick() {},

    getTime(item) {
      if (item.scheduleDate) {
        return `${dayjs(item.scheduleDate).format('MM.DD')}更新`
      }
      return ""

    },

    onClick(item, index) {
      console.warn("item", item, index);
      if (item.name) {
        this.$basejs.globaltoken();
				if(global.token) {
          this.$urouter.navigateTo(item.page);
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.menu {
  position: relative;
  width: 100%;
  height: 300px;
  padding: 55px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  margin-bottom: 24px;
}
ul,
li {
  margin: 0;
  list-style-type: none;
  padding: 0;
}
ul {
  width: 190px;
  height: 190px;
  border-radius: 50%;
  position: relative;
}

li {
  width: 136px;
  height: 100px;
  position: absolute;

  color: white;
  font-size: 25px;

  text-align: center;
  /* left: 50%; */
  margin-left: -68px;
  margin-top: -50px;

  transform-origin: 0px 0px;
}
</style>
